/* 商品列表 */
body {
    background: #f4f4f4;
}

ul {
    font-weight: 400;
}

.header {
    background   : #fff;
    border-bottom: 1px solid #efefef;
}

.footer {
    background: #fff;
}

.banner-wrap {
    margin-top: 80px;
    overflow  : hidden;

    .banner {
        width   : 1240px;
        height  : 450px;
        margin  : 0 auto;
        position: relative;

        .banner-list {
            // width: 5115px;
            width   : 7670px;
            position: absolute;
            top     : 0;
            left    : -655px;
            // left: -3215px;
            // left: -5775px;

            li {
                float: left;

                img {
                    height: 450px;
                }
            }
        }

        .banner-nav {
            width      : 500px;
            padding    : 0 10px;
            height     : 25px;
            position   : absolute;
            z-index    : 20;
            left       : 50%;
            margin-left: -250px;
            bottom     : 20px;
            text-align : center;

            li {
                display         : inline-block;
                zoom            : 1;
                width           : 8px;
                height          : 8px;
                background-color: #666;
                margin          : 5px 8px;
                border-radius   : 50%;
                cursor          : pointer;
            }

            li.banner-nav-on {
                background-color: transparent;
                border          : 1px solid #666;
            }
        }
    }
}

.container-wrap {
    padding-top      : 1px;
    line-height      : 1.5;
    color            : #666;
    // padding-bottom: 60px;

    .title {
        display        : flex;
        justify-content: space-between;
        align-items    : flex-end;
        margin-top     : 87px;
        margin-bottom  : 25px;
        font-size      : 30px;
        line-height    : 1;
        color          : #333;

        .title-txt {
            color: #515151;
        }

        .title-filter {
            position: relative;
            display : inline-block;
            margin  : 0;

            .title-filter-list {
                float: left;

                a {
                    position    : relative;
                    font-size   : 18px;
                    font-weight : 300;
                    line-height : 20px;
                    margin-right: 15px;
                    float       : left;
                    width       : 50px;
                    height      : 20px;

                    &:hover {
                        color: #008cff;
                    }

                    &:last-child::before {
                        content            : "";
                        position           : absolute;
                        top                : -1px;
                        right              : 0;
                        width              : 0;
                        height             : 0;
                        border             : 5px solid transparent;
                        border-bottom-color: #343434;
                    }

                    &:last-child::after {
                        content         : "";
                        position        : absolute;
                        bottom          : -1px;
                        right           : 0;
                        width           : 0;
                        height          : 0;
                        border          : 5px solid transparent;
                        border-top-color: #343434;
                    }
                }

                .title-filter-on {
                    color: #008cff;
                }
            }
        }
    }

    .goods-wrap {
        .goods-list {
            li {
                position  : relative;
                float     : left;
                width     : 403px;
                height    : 556px;
                margin    : 0 15px 15px 0;
                background: #fff;
                box-sizing: border-box;

                &:hover {
                    transition: all 0.5s;
                    box-shadow: 0px 5px 10px 1px #ccc;
                }

                &:nth-child(3n) {
                    margin-right: 0;
                }

                a {
                    display       : block;
                    padding-top   : 40px;
                    padding-bottom: 28px;
                    max-height    : 556px;
                    text-align    : center;

                    img {
                        display   : block;
                        width     : 80%;
                        margin    : 0 auto;
                        min-height: 320px;
                        max-width : 320px;
                    }

                    .item-color {
                        display   : inline-block;
                        min-height: 20px;
                        margin    : 10px 0;
                        opacity   : 0;
                        visibility: hidden;
                    }

                    .item-title,
                    .item-price {
                        padding      : 0 12px;
                        text-align   : center;
                        overflow     : hidden;
                        text-overflow: ellipsis;
                        white-space  : nowrap;
                    }

                    .item-title {
                        font-size: 23px;
                        color    : #333;
                    }

                    .item-desc {
                        display      : inline-block;
                        margin       : 5px auto;
                        color        : #666;
                        text-align   : center;
                        min-height   : 24px;
                        font-size    : 16px;
                        font-weight  : 300;
                        max-width    : 270px;
                        text-overflow: ellipsis;
                        white-space  : nowrap;
                        overflow     : hidden;
                    }

                    .item-price {
                        color: #c00;

                        em {
                            font-size: 16px;
                        }

                        span {
                            font-size: 28px;
                        }
                    }

                    .add-cart{
                        display: none;
                    }
                }
            }
        }
    }

    .goods-banner {
        a {
            display: block;
            width  : 100%;

            img {
                width     : 100%;
                max-height: 250px;
            }
        }
    }

    .recommend {
        text-align   : left;
        font-size    : 24px;
        color        : #333;
        font-weight  : 300;
        overflow     : hidden;
        margin-top   : 90px;
        margin-bottom: 25px;

        .recommend-goods {
            overflow  : hidden;
            background: #fff;
            border    : 1px solid #fefefe;
            margin    : 30px 0;

            .recommend-show {
                ul {
                    width              : 1600%;
                    transition-duration: 0.6s;

                    li {
                        width       : 310px;
                        margin-right: 0px;
                        float       : left;
                        display     : block;

                        &:hover img {
                            transform-origin: 50% 50%;
                            transform       : scale(1.1);
                        }

                        a {
                            display       : block;
                            text-align    : center;
                            padding-top   : 40px;
                            padding-bottom: 44px;

                            img {
                                width         : 230px;
                                min-height    : 230px;
                                vertical-align: top;
                            }

                            .rec-title {
                                margin-top   : 36px;
                                text-align   : center;
                                font-size    : 21px;
                                color        : #2b2b2b;
                                overflow     : hidden;
                                text-overflow: ellipsis;
                                white-space  : nowrap;
                            }

                            .rec-price {
                                margin-top: 8px;
                                font-size : 16px;
                                color     : #c00;

                                .rec-price-txt {
                                    font-size: 27px;
                                }
                            }
                        }
                    }
                }

                .rec-fir {
                    transform: translate3d(0px, 0px, 0px);
                }

                .rec-sec {
                    transform: translate3d(-930px, 0px, 0px);
                }

                .rec-thi {
                    transform: translate3d(-1242px, 0px, 0px);
                }
            }
        }

        .rec-nav {
            margin-top: 20px;

            .rec-nav-list {
                width : 85px;
                margin: 0 auto;

                li {
                    margin : 0 6px;
                    display: inline-block;

                    a {
                        display         : block;
                        width           : 11px;
                        height          : 11px;
                        box-sizing      : border-box;
                        border-radius   : 50%;
                        box-shadow      : none;
                        background-color: #fff;
                        border          : 1px solid #a1a1a1;
                    }

                    &.rev-nav-on a {
                        border          : 1px solid transparent;
                        background-color: #a1a1a1;
                    }
                }
            }
        }
    }
}